<template>
	<div class="agent">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="坐席数据" name="agent">
				<div class="head">
					<Status :agentStatus="agentStatus" />
				</div>
				<div class="agent-btn">
					<AgentBtn @sortAgent="sortAgent" />
				</div>
				<div class="search">
					<div class="time">
						<span>筛选：</span>
						<el-date-picker v-model="checkData.startTime" type="date" @input="searchStartTime()" placeholder="选择时间" format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
						<el-date-picker v-model="checkData.endTime" type="date" @input="searchEndTime()" placeholder="选择时间" format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
						<el-input v-model="checkData.keyWord" @blur="searchKey" prefix-icon="el-icon-search" placeholder="输入工号或姓名"></el-input>
						<el-select v-model="checkData.checkIn" placeholder="签入技能组" @change="selectCheckIn">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</div>
				</div>
				<div class="table-box">
					<Table :tableData="agentData">
						<template v-slot:btn>
							<el-table-column width="310px" align="center" label="操作">
								<template slot-scope="scope">
									<el-button size="mini" type="danger" @click="offline(scope.$index, scope.row)">下线</el-button>
								</template>
							</el-table-column>
						</template>
					</Table>
				</div>
				<br />
				<div class="page">
					<PageSize :pages="checkData" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import Status from './Status.vue';
import AgentBtn from './AgentBtn.vue';
import Table from '../components/Table.vue';
import PageSize from '../components/PageSize.vue';
import { filterAgentState } from '@/utils/tool';
import { getagentcount, getagentlist, deleteagent, getGroupsListWithOrg } from '@/api/api';
import { mapState } from 'vuex';
import moment from 'moment';
import onlineAgentImg from '@/assets/img/upload/online-agent.png';
import notReadyAgentImg from '@/assets/img/upload/notReady-agent.png';
import readyAgentImg from '@/assets/img/upload/ready-agent.png';
import ringingAgentImg from '@/assets/img/upload/ringing-agent.png';
import bebusyAgentImg from '@/assets/img/upload/bebusy-agent.png';
import afterWorkAgentImg from '@/assets/img/upload/afterWork-agent.png';
import otherWorkAgentImg from '@/assets/img/upload/otherWork-agent.png';
import waitingImg from '@/assets/img/upload/waiting.png';
import incallImg from '@/assets/img/upload/incall.png';
import aiAgentCallImg from '@/assets/img/upload/ai_agent_call.png';
export default {
	components: {
		Status,
		AgentBtn,
		Table,
		PageSize
	},
	name: 'agent',
	data() {
		return {
			activeName: 'agent',
			agentStatus: [
				{
					id: 1,
					des: '在线坐席数',
					src: onlineAgentImg,
					num: 0,
					type: 'all'
				},
				{
					id: 2,
					des: '示忙坐席数',
					src: notReadyAgentImg,
					num: 0,
					type: 'notReady'
				},
				{
					id: 3,
					des: '示闲坐席数',
					src: readyAgentImg,
					num: 0,
					type: 'ready'
				},
				{
					id: 4,
					des: '振铃中坐席数',
					src: ringingAgentImg,
					num: 0,
					type: 'ringing'
				},
				{
					id: 5,
					des: '会话中坐席数',
					src: bebusyAgentImg,
					num: 0,
					type: 'serving'
				},
				{
					id: 6,
					des: '话后整理坐席数',
					src: afterWorkAgentImg,
					num: 0,
					type: 'afterWork'
				},
				{
					id: 7,
					des: '小休坐席数',
					src: otherWorkAgentImg,
					num: 0,
					type: 'otherWork'
				},
				{
					id: 8,
					des: '排队数',
					src: waitingImg,
					num: 0,
					type: 'waiting'
				},
				{
					id: 9,
					des: '进电量',
					src: incallImg,
					num: 0,
					type: 'incall'
				},
				{
					id: 10,
					des: 'AI 接听并发数',
					src: aiAgentCallImg,
					num: 0,
					type: 'servingRobot'
				}
			],
			agentData: {
				sort: { prop: 'acceptedTime', order: 'descending' },
				tableHead: [
					{
						label: '工号',
						prop: 'agentName'
					},
					{
						label: '姓名',
						prop: 'fullName'
					},
					{
						label: '坐席 ID',
						prop: 'agentId'
					},
					{
						label: '登陆时间',
						prop: 'loginAt'
					},
					{
						label: '签入技能组',
						prop: 'groupName'
					},
					{
						label: '当前状态',
						prop: 'currentStatus'
					}
				],
				tableConent: [],
				showIndex: false
			},
			checkData: {
				startTime: '',
				endTime: '',
				page: 1,
				pageSize: 10,
				status: '',
				keyWord: '',
				total: 0,
				checkIn: ''
			},
			options: []
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.login.userInfo
		})
	},
	mounted() {
		this.getGroupListWithOrgData();
		this.getAgentCountInit();
		this.getAgentListInit();
		this.interval = setInterval(() => {
			this.getAgentListInit();
			this.getAgentCountInit();
		}, 10000);
	},
	methods: {
		getAgentListInit() {
			getagentlist(this.checkData)
				.then(res => {
					if (res.status === 200) {
						this.checkData.total = res.data.data.count;
						const { data } = res.data.data;
						this.agentData.tableConent = data.map(item => {
							return {
								agentName: item.userName || '-',
								fullName: item.fullName || '-',
								agentId: item.agentId,
								loginAt: this.$moment(item.loginAt).format('YYYY-MM-DD HH:mm:ss'),
								currentStatus: filterAgentState(item.currentStatus),
								groupName: item.groupName ? item.groupName.replace(/,/g, '，') : '--'
							};
						});
					}
				})
				.catch(err => {
					this.$requestApiError(err, () => {
						this.$router.push('/');
					});
				});
		},
		getAgentCountInit() {
			getagentcount()
				.then(res => {
					if (res.status === 200) {
						const { data } = res.data;
						console.log(data, 'count');
						if (this.agentStatus[0].type === 'all') {
							this.agentStatus[0].num = data.all;
						}
						if (this.agentStatus[1].type === 'notReady') {
							this.agentStatus[1].num = data.notReady;
						}
						if (this.agentStatus[2].type === 'ready') {
							this.agentStatus[2].num = data.ready;
						}
						if (this.agentStatus[3].type === 'ringing') {
							this.agentStatus[3].num = data.ringing;
						}
						if (this.agentStatus[4].type === 'serving') {
							this.agentStatus[4].num = data.serving;
						}
						if (this.agentStatus[5].type === 'afterWork') {
							this.agentStatus[5].num = data.afterWork;
						}
						if (this.agentStatus[6].type === 'otherWork') {
							this.agentStatus[6].num = data.otherWork;
						}
						if (this.agentStatus[7].type === 'waiting') {
							this.agentStatus[7].num = data.waiting;
						}
						if (this.agentStatus[8].type === 'incall') {
							this.agentStatus[8].num = data.incall;
						}
						if (this.agentStatus[9].type === 'servingRobot') {
							this.agentStatus[9].num = data.servingRobot;
						}
					}
				})
				.catch(err => {
					this.$requestApiError(err, () => {
						this.$router.push('/');
					});
				});
		},
		searchStartTime() {
			this.$nextTick(() => {
				this.checkData.page = 1;
				this.checkData.pageSize = 10;
				this.checkData.startTime = this.checkData.startTime ? moment(this.checkData.startTime).toISOString() : '';
				if (!this.checkData.startTime) {
					this.checkData.startTime = '';
				}
				this.getAgentListInit();
			});
		},
		searchKey() {
			this.getAgentListInit();
		},
		selectCheckIn(e) {
			console.log('selectCheckIn', e, this.checkData);
			this.checkData.page = 1;
			this.checkData.pageSize = 10;
			this.getAgentListInit();
		},
		searchEndTime() {
			this.$nextTick(() => {
				this.checkData.page = 1;
				this.checkData.pageSize = 10;
				this.checkData.endTime = this.checkData.endTime ? moment(this.checkData.endTime).toISOString() : '';
				if (!this.checkData.endTime) {
					this.checkData.endTime = '';
				}
				this.getAgentListInit();
			});
		},
		offline(index, row) {
			console.log(row);
			this.$confirm(`确定要下线: ${row.agentName} 坐席吗, 是否继续?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					deleteagent(row.agentId)
						.then(res => {
							if (res.status === 200) {
								this.getAgentCountInit();
								this.getAgentListInit();
								this.$message({
									type: 'success',
									message: '下线成功!'
								});
							}
						})
						.catch(err => {
							this.$Spin.hide();
							this.$requestApiError(err, () => {
								this.$router.push('/');
							});
						});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
		},
		changePageSize(val) {
			console.log(val);
			this.checkData.pageSize = val;
			this.getAgentListInit();
		},
		changeCurrentPage(val) {
			console.log(val);
			this.checkData.page = val;
			this.getAgentListInit();
		},

		// 坐席状态切换
		sortAgent(index) {
			switch (index) {
				case 0:
					this.checkData.status = '';
					this.getAgentListInit();
					break;
				case 1:
					this.checkData.status = 'notReady';
					this.getAgentListInit();
					break;
				case 2:
					this.checkData.status = 'ready';
					this.getAgentListInit();
					break;
				case 3:
					this.checkData.status = 'ringing';
					this.getAgentListInit();
					break;
				case 4:
					this.checkData.status = 'serving';
					this.getAgentListInit();
					break;
				case 5:
					this.checkData.status = 'afterWork';
					this.getAgentListInit();
					break;
				case 6:
					this.checkData.status = 'otherWork';
					this.getAgentListInit();
					break;
				default:
					this.getAgentListInit();
			}
		},
		//  获取所有的分组
		async getGroupListWithOrgData() {
			try {
				const { data } = await getGroupsListWithOrg(this.userInfo.org);
				console.log(data, 'getGroupsListWithOrg result', this.userInfo.org);
				data.unshift(
					{
						id: 'all',
						name: '全部'
					},
					{
						id: 'null',
						name: '未签入'
					}
				);
				if (data.length > 0) {
					this.options = data.map(item => {
						return {
							value: item.id,
							label: item.name
						};
					});
				}
			} catch (error) {
				console.log(error);
				this.$message.error('获取分组列表失败');
			}
		}
	},
	beforeRouteLeave(to, from, next) {
		if (this.interval) {
			clearInterval(this.interval);
		}
		next();
	}
};
</script>

<style lang="less" scoped>
.agent {
	.search {
		padding: 10px;
	}
	.time {
		.el-input {
			width: 220px;
			height: 32px;
		}
	}
}
</style>

<style lang="less">
.agent {
	.el-date-editor,
	.el-input {
		input {
			height: 32px;
		}
		.el-input__icon {
			line-height: 32px;
		}
	}
}
</style>
